<template>
  <div id="addFriends">
    <!--时间-->
    <section class="time">
      <div class="time-min">
        <div class="time_data">{{Time.iHours<=9?"0"+Time.iHours:Time.iHours}} : {{Time.iMin<=9?"0"+Time.iMin:Time.iMin}}</div>
        <div class="Lunarday">{{Time.iMonth}}月{{Time.iData}}日</div>
      </div>
    </section>
    <!-- 申请好友列表 -->
    <section class="friends" style="vertical-align: middle;">
      <div class="apply" v-for="(item,index) in addInfoData" @touchstart="touchstart(index)">
        <router-link to="/home">
          <div class="wechat" style="margin-top: 0;">
            <img :src="item.weChat" alt="">
          </div>
          <div class="add_info">
            <img :src="item.img" alt="" />
            <div>
              <p>
                <span>{{item.name}}</span><i>现在</i><br />
                您好，我是{{item.name}}，想加您为好友
              </p>
              <p>点击查看</p>
            </div>
          </div>
        </router-link>
      </div>
      <audio id="tip-sound1" src="http://www.h5feel.com/addons/tianji_xmluma/template/static/tip2.mp3" preload></audio >
      <audio id="tip-sound2" src="http://www.h5feel.com/addons/tianji_xmluma/template/static/tip2.mp3" preload></audio >
    </section>
  </div>

</template>

<script>
    import head1 from "@/common/images/head1.png";
    import head2 from "@/common/images/head2.png";
    import weChat from "@/common/images/weChat.png"

    export default {
        name: "addFriends",
        data() {
            return {
              Time:{
                iMonth:null,//月
                iData:null,//日
                iHours:null,//时
                iMin:null//分
              },
              addInfoData:[{
                weChat:weChat,
                img:head2,
                name:"杨紫"
              },{
                weChat:weChat,
                img:head1,
                name:"任嘉伦"
              }]
            }
        },
        created() {
          this.getData();
        },
        computed:{
            store() {
              return this.$store.state;
            }
        },
        mounted() {
          setInterval(() => {
            this.getData();
          },1000);


            function playTipSound(id){
                let tipSound =  document.getElementById(id);
                tipSound.play();
            }
            let fm1 = function () {
                playTipSound('tip-sound1')
                $(".apply").eq(0).addClass("v-enter-to")
            }
            let fm2 = function () {
                //playTipSound('tip-sound2')
                $(".apply").eq(1).addClass("v-enter-to");
            }
            let startTime = (new Date()).getTime()
            wx.ready(function () {
                while(true){
                    let endTime = (new Date()).getTime()
                    if(endTime-startTime>2000){
                        fm1()
                        setTimeout(function () {
                            wx.ready(function () {
                                fm2()
                            })
                        },1700)
                        break
                    }
                }
            })

        },
        methods:{
            //时间
            getData() {
              let myTime = new Date();//系统的当前时间
              this.Time.iMonth = myTime.getMonth()+1;//月
              this.Time.iData = myTime.getDate();//日
              this.Time.iHours = myTime.getHours();//时
              this.Time.iMin = myTime.getMinutes();//分
            },
            touchstart(index) {
              this.store.setCookie("headImg",$(".apply").eq(index).find(".add_info img").attr('src'),2);

              this.store.setCookie("name",$(".apply").eq(index).find(".add_info div").find("p span").html(),2);

              this.store.setCookie("code",index,2);
            }
        }
    }
</script>

<style scoped>

</style>
